<template>
  <el-main :style="{background: '#ebebeb'}">
    <el-row class="body-card">
      <h3>用户管理</h3>
      <Divider/>
      <el-row :style="{margin: '20px 0'}">
        <el-button type="primary" @click="handleOpenEdit()">新建</el-button>
      </el-row>
      <el-row>
        <el-table
          border
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="username"
            label="用户名">
          </el-table-column>
          <el-table-column
            prop="authority"
            label="角色">
            <template slot-scope="scope">
              <span v-if="scope.row.authority==0">标准用户</span>
              <span v-else-if="scope.row.authority==1">管理员</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="operation"
            label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="handleOpenEdit(scope.row.id)">修改</el-button>
              <el-button type="text" @click="handleDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <div style="padding: 20px 0;text-align: right">
           
            <el-pagination @size-change="()=>showguidelist()" @current-change="()=>showguidelist()" :current-page.sync="current" :page-size="pageSize" :total="total" background layout="prev, pager, next"> </el-pagination>
         
		 </div>
    </el-row>

    <!--用户信息修改-->
    <el-dialog :visible.sync="dialogFormVisible" :append-to-body="true" width="400px">
      <div slot="title" :style="{fontSize:'16px',lineHeight:'24px'}">
        <i class="el-icon-edit-outline"></i>
        <span v-if="dialogTypes===0">新建用户</span>
        <span v-else-if="dialogTypes===1">修改用户</span>
        <Divider :distance="10"/>
      </div>
	  <div :style="{fontSize:'16px',lineHeight:'24px'}"> 
	      <span>初始密码为: 123456     </span>
		  <span>邮箱: 123456@qq.com     </span>
	  </div>
      <el-form :style="{marginTop:'16px'}" :model="formData">
        <el-form-item label="用户名：" :label-width="formLabelWidth">
          <el-input type="username" v-model="formData.name" auto-complete="off" :style="{width:'200px'}"></el-input>
        </el-form-item>
        <el-form-item label="用户角色：" :label-width="formLabelWidth">
          <el-select v-model="formData.authority" placeholder="请选择角色" :style="{width:'200px'}">
            <el-option label="普通用户" value="StandardUser"></el-option>
            <el-option label="管理员" value="Administrators"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>

  </el-main>
</template>

<script>
import {
   userServer,
   userlistServer
} from "../../../api/backstage";
  export default {
    name: "userManager",
    data() {
      return {
        tableData: [{
          id: 123,
          name: "张三",
          authority: 1
        }, {
          id: 123,
          name: "李四",
          authority: 0
        }],
        dialogFormVisible: false,
        dialogTypes: 0,
        formLabelWidth: '100px',
        formData: {
          id: 123,
          name: "张三",
          authority: 1
        },
	  total: 0,
      pageSize: 10,
      current: 1
      };
    },
	mounted(){ 
      this.showuserlist();
},	
    methods: {
	showuserlist(){
	 userlistServer("get", {
	 params: {
		  pageSize: this.pageSize,
          current: this.current
		  }}).then(
        suc => {
          const { code, message, data } = suc.data;
          if (code) {
		  console.log(data);
         const { current, pageSize, total, list } = data;   
			if (Array.isArray(list)) {
              this.tableData = list;
              this.total = total;  
              this.pageSize = pageSize;
              this.current = current;
			  }
          } else {
            this.$message({
              type: "error",
              message
            }); 
		  } 
		  },
        err => {
          this.$message({
            type: "error",
            message: err.message
          }); 
        });
	  }, 
      handleOpenEdit(id) {
        //调用接口获取内容
        console.log(id)
        if (!!id) {
          this.dialogTypes = 1;
        } else {
          this.dialogTypes = 0;
          this.formData = {
            id: '',
            name: "",
            role: ''
          }
        }
        this.dialogFormVisible = true;
      },
      handleDelete(id) {
        console.log(this)
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
      }
    }
  };
</script>

<style lang="less">

</style>
